<script lang="ts" setup>
import { ref, defineEmits,reactive } from 'vue'
import type { TableColumnCtx, TableInstance } from 'element-plus'
const dialogVisible = ref(false)
const keyword = ref('') 
interface Lists {
  id: string
  titleName: string
  issueType: string
  invoiceType: string
  creationDate: string
}
const tableData: Lists[] = [
    {
        id: '1',
        titleName: '崔宏强',
        issueType: '企业',
        invoiceType: '增值税普通发票',
        creationDate: '2024-11-28',
    },
    {
        id: '2',
        titleName: '抬头名称',
        issueType: '个人',
        invoiceType: '增值税专用发票',
        creationDate: '2024-11-28',
    },
    {
        id: '1',
        titleName: '崔宏强',
        issueType: '企业',
        invoiceType: '增值税普通发票',
        creationDate: '2024-11-28',
    },
    {
        id: '2',
        titleName: '抬头名称',
        issueType: '企业',
        invoiceType: '增值税专用发票',
        creationDate: '2024-11-28',
    },
    {
        id: '1',
        titleName: '崔宏强',
        issueType: '个人',
        invoiceType: '增值税普通发票',
        creationDate: '2024-11-28',
    },
    {
        id: '2',
        titleName: '抬头名称',
        issueType: '企业',
        invoiceType: '增值税专用发票',
        creationDate: '2024-11-28',
    },
    {
        id: '1',
        titleName: '崔宏强',
        issueType: '企业',
        invoiceType: '增值税专用发票',
        creationDate: '2024-11-28',
    },
    {
        id: '2',
        titleName: '抬头名称',
        issueType: '企业',
        invoiceType: '增值税专用发票',
        creationDate: '2024-11-28',
    },
    {
        id: '1',
        titleName: '崔宏强',
        issueType: '企业',
        invoiceType: '增值税专用发票',
        creationDate: '2024-11-28',
    },
    {
        id: '2',
        titleName: '抬头名称',
        issueType: '企业',
        invoiceType: '增值税专用发票',
        creationDate: '2024-11-28',
    },
]
const filterTag = (value: string, row: Lists) => {
  console.log(row.issueType, value)
  return row.issueType === value
}
const filterTag2 = (value: string, row: Lists) => {
  return row.invoiceType === value
}
const tableRef = ref<TableInstance>()

const form = reactive({
  issueType: '',
  invoiceType: '',
  titleName: '',
})
const emit = defineEmits(['switch-to-withdrawal'])
const handleButtonClick = () => {
  emit('switch-to-withdrawal')
}



</script>
<template>
    <div class="bs-panel">
        <div class="bs-panel-body">
            <div class="bs-panel_hd">
                <div class="bs-panel_tt bold">我的抬头</div>
                <el-link type="info" @click="handleButtonClick">返回继续开票</el-link>
            </div>
            <div class="cert-filter">
                <div class="btn btn-cert" @click="dialogVisible = true">+ 添加新的发票抬头</div>
                <el-input v-model="keyword" placeholder="输入关键词快速查找" style="width: 200px;">
                    <template #suffix>
                        <el-icon class="el-input__icon"><Search /></el-icon>
                    </template>
                </el-input>
            </div>
            <el-table :data="tableData"  style="width: 100%" ref="tableRef">
                <el-table-column prop="id" label="序号" width="100" align="center"/>
                <el-table-column prop="titleName" label="抬头名称"  align="center"/>
                <el-table-column prop="issueType" label="开具类型" align="center" :filters="[
                  { text: '个人', value: '个人' },
                  { text: '企业', value: '企业' },
                ]"
                :filter-method="filterTag"
                filter-placement="bottom"/>
                <el-table-column prop="invoiceType" label="发票类型" align="center" :filters="[
                  { text: '增值税普通发票', value: '增值税普通发票' },
                  { text: '增值税专用发票', value: '增值税专用发票' },
                ]"
                :filter-method="filterTag2"
                filter-placement="bottom"/>
                <el-table-column prop="creationDate" label="创建日期" align="center"/>
                <el-table-column prop="creationDate" label="操作" width="200" align="center">
                    <template #default="scope">
                        <el-link type="blue" @click="handleEdit(scope.row)">编辑</el-link>
                        <el-link type="blue" @click="handleDelete(scope.row)" style="margin-left: 20px;">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bs-panel-footer">
                <el-pagination background layout="prev, pager, next" :total="1000" />
            </div>
        </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="抬头信息"
      width="560"
      >
      <div class="form-box">
          <el-form :model="form" label-width="auto" >
              <el-form-item label="开具类型：">
                  <el-radio-group v-model="form.issueType" size="large">
                      <el-radio label="个人" value="个人" />
                      <el-radio label="企业" value="企业" />
                  </el-radio-group>
              </el-form-item>
              <el-form-item label="发票类型：">
                <el-radio-group v-model="form.invoiceType" size="large">
                      <el-radio label="增值税普通发票" value="增值税普通发票" />
                      <el-radio label="增值税专用发票" value="增值税专用发票" />
                  </el-radio-group>
              </el-form-item>
              <el-form-item label="发票抬头：">
                  <el-input v-model="form.titleName" placeholder="请先输入" />
              </el-form-item>
          </el-form>
      </div>
      <template #footer>
          <el-button type size="large" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" size="large" @click="dialogVisible = false">确 定</el-button>
      </template>
    </el-dialog>
</template>
<style scoped lang='scss'>
.form-box{
  padding: 10px 20px;
}
.cert-filter{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
        .btn-cert{
            border: 1px dashed #ddd;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            width: 150px;
        }
    }
    .table-top{
        margin-bottom: 10px;
        color: #666;
    }
    .dis-view{
        padding: 0 20px;
    }
    .view-row{
        padding: 0 20px;
        .el-col{
            margin-bottom: 20px;
        }
    }
    .view-label{
        color: rgba(0, 0, 0, 0.42745098039215684);
        margin-bottom: 10px;
    }
    .view-value{
        color: rgba(0, 0, 0, 0.42745098039215684);
        .val{
            font-size: 24px;
            color: #000;
        }
    }
    .message-body{
        padding:10px 25px;
    }
    .bs-panel-body{
        position: relative;
        padding: 25px;
    }
    .bs-panel-body:first-child:before{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #d3d7dc;
    }
    .form-footer,
    .form-top{
        height: 32px;
        text-align: right;
    }
    .bs-panel-footer{
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
    .filter-cell{
        margin-bottom: 15px;
    }
    .filter-box{
        display: flex;
        align-items: center
    }
    .filter-box .el-select{
        margin: 0 10px;
    }
    .filter-cell ::v-deep .el-form-item{
        margin-right: 12px;
    }

</style>